import * as React from "react";
import {Button,message} from 'antd';
import '@/css/Essay.less'
import { LikeFilled, StarFilled, MessageFilled, ShareAltOutlined, WarningFilled} from '@ant-design/icons';
import Content from "@/pages/content";
import {axiosRequest} from "@/service";
import { withRouter } from "@/hooks/withRouter";

import 'bytemd/dist/index.css'
// 编辑 / 视图
import {Editor, Viewer} from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';
import highlight from '@bytemd/plugin-highlight'
import mediumZoom from "@bytemd/plugin-medium-zoom";
import gemoji from "@bytemd/plugin-gemoji";
// 引入中文包
import zhHans from "bytemd/lib/locales/zh_Hans.json";

// 引入基础css
import 'bytemd/dist/index.min.css';

//引入github编辑器样式
import 'github-markdown-css/github-markdown.css'

import '@/css/ByteMd.less'

// 引入高亮css
import "highlight.js/styles/vs.css";
import Right from "@/pages/right";

const plugins = [gfm(), gemoji(), highlight(), mediumZoom()]

class Essay extends React.Component<any,any>{

    constructor(props: any) {
        super(props);
        this.state = {
            article:{},
        }
    }

    componentDidMount(){
        let articleId = this.props.location.search ? this.props.location.search.split('=')[1] : ''
        this.getArticleDetails(articleId)
    }

    getArticleDetails = (articleId: string) => {

        const config = {
            url: 'queryArticleDetails',
            method: 'post',
            data: {
                articleId: articleId
            }
        }

        axiosRequest(config).then((res:any) => {
            if(res && res.data && res.data.length > 0){
                this.setState(Object.assign({}, this.state, {article: res.data[0]}));
            } else {
                message.error('查询文章失败！')
            }
        }).catch((err:any) => {
            message.error('查询文章失败！')
        })
    }

    render(){

        return(
            <div className="main-essay">
                <article className="e-box">

                    <div className="essay-mid">

                        <ul className="tools">

                            <div className="tools-box tools-value" style={{marginTop:'1rem'}} title={'200'}>
                                <LikeFilled />
                            </div>

                            <div className="tools-box tools-value"  title={'588'}>
                                <MessageFilled />
                            </div>

                            <div className="tools-box tools-value" title={'666'}>
                                <StarFilled />
                            </div>

                            <div className="tools-box" style={{marginTop:'0.2rem'}}>
                                <ShareAltOutlined />
                            </div>

                            <div className="tools-box">
                                <WarningFilled />
                            </div>
                        </ul>

                        <ul className="home-ul">
                            <section className="essay-content">
                                <p className="essay-title">{this.state.article.title}</p>
                                <div className="essay-box">
                                    <img className="essay-img" src={this.state.article.cover_pic} alt="头像"/>
                                    <span>
                                <p className="essay-author">{this.state.article.author}</p>
                                <p className="essay-date">{this.state.article.publish_time} ·  阅读 {this.state.article.views_num}</p>
                            </span>
                                </div>

                                <img className="e-img" src={this.state.article.cover_pic} alt="头像"/>

                                <Viewer value={this.state.article.content} plugins={plugins}/>

                            </section>

                            <section style={{margin:'0.2rem 0'}}>
                                <Content article={this.state.article}/>
                            </section>

                        </ul>

                        <Right></Right>
                    </div>

                </article>
            </div>
        )
    }
}
export default withRouter(Essay)